/* 国际机构 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, DatePicker, Modal, Select,message } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  internationalMachinerySelect,internationalMachineryInfo,machineryCourseInfo,deleteCourseInfo,deleteInternationalInfo
} from 'actions/companyManage'

import {getbasetypefetch} from 'actions/common'
import '../../style/userControl.less'

import ModalAddInternationalMachinery from './addInternationalMachineryModal.js';
import ModalAddMachineryCourse from './addMachineryCourseModal.js';


const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      modalList:"",//列表内容详情
      addModalFlg:false,//新增机构弹窗
      addCourseFlg:false,//新增课程弹窗
      institutionId:"",//新增课程的机构ID
      courseInfo:"",//编辑课程 详细信息
      addCourseType:"",//课程弹窗类型 1新增 2编辑
      typeData:"",//编辑 新增 类型
    }
    this.keyword={"name":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "name":this.props.form.getFieldValue('name'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(internationalMachinerySelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  


  addReport(type,id){//新增机构
    if(type == 1){
      //新增结构
      this.setState({
        addModalFlg: true,
        modalList:"",
        typeData:type
      })
    }else{
      //编辑机构
      this.props.dispatch(internationalMachineryInfo({"id":id},
        (respose) => {
          this.setState({
            addModalFlg: true,
            modalList:respose,
            typeData:type
          })
      }))
    }
    
  }

  addModalCancel(){//关闭新增机构弹窗
    this.setState({
      addModalFlg: false,
    })
  }

  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        modalList: "",
      })
    })
  }

  showModal(id){//点击查看  机构详情
    this.props.dispatch(internationalMachineryInfo({"id":id},
      (respose) => {
        this.setState({
          contentModal: true,
          modalList:respose
        })

    }))
  }

  addCourseModal(type,id){//添加课程弹窗
    if(type == 1){
      //新增
      this.setState({
        addCourseFlg: true,
        addCourseType:type,
        courseInfo:"",
        institutionId:id
      })
    }else{
      this.props.dispatch(machineryCourseInfo({"id":id},
      (respose) => {
        this.setState({
          addCourseFlg: true,
          addCourseType:type,
          courseInfo:respose,
          contentModal:false
        })

    }))
      //编辑
    }
    
  }

  addCourseCancel(){//关闭添加弹窗
    this.setState({
      addCourseFlg: false,
    })
  }

  deleteCourse(id,institutionId){
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteCourseInfo(
          {"id":id,"institutionId":institutionId},
          (respose) => {
            message.success(respose.respMsg);
            this.showModal(institutionId)
            this.selectList();
        }))
      },
      onCancel:()=>{

      }
    })
  }

  deleteInternational(id){//删除国际机构
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteInternationalInfo(
          {"id":id},
          (respose) => {
            message.success(respose.respMsg);
            this.contentModalCancel();
            this.selectList();
        }))
      },
      onCancel:()=>{

      }
    })
  }


  columns() {//表格标题
    return [
      {
        title: '机构编号',
        key: 'code',
        dataIndex: 'code',
        width: '25%',
      },
      {
        title: '机构名称',
        dataIndex: 'name',
        key: 'name',
        width: '25%',
      },
      {
        title: '机构课程',
        dataIndex: 'courseTotal',
        key: 'courseTotal',
        width: '25%',
      },
      {
        title: '操作',
        width: '25%',
        render: (text, recordId, index) => 
        <div>
          <Button key="seeinfo" type="primary" size="small" onClick={this.showModal.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>   
          <Button  type="primary" size="small" onClick={this.addReport.bind(this,2,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>       
          <Button key="addcourse" type="primary" size="small" onClick={this.addCourseModal.bind(this,1,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>添加课程</Button>          
        </div>,
        
      },
    ]
  }
  
  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const modalList = this.state.modalList.respData ? this.state.modalList.respData :{};
    const courseList = modalList.courseList ? modalList.courseList :[]
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="机构名称">
              {
                getFieldDecorator('name', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addReport.bind(this,1)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={respData.resultData}
            pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 新增机构弹窗 */}
        {
          this.state.addModalFlg ?
          <ModalAddInternationalMachinery 
          ModalFlg={this.state.addModalFlg} 
          ModalCancel={this.addModalCancel.bind(this)} 
          callback={this.selectList.bind(this)}
          content={this.state.modalList.respData ? this.state.modalList.respData : ""}
          type={this.state.typeData}
        /> : ""
        }
        
        {/* 信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.contentModal}
          title="机构详情"
          onCancel={this.contentModalCancel.bind(this)}
          footer={[
            <Button type="primary" onClick={this.deleteInternational.bind(this,modalList.id)}>删除</Button>
          ]}
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">机构名称:</span><span className="content">{modalList.name}</span>
            </li>
            <li>
              <span className="title">所属国家:</span><span className="content">{modalList.nationName}</span>
            </li>
            <li>
              <span className="title">国家图标:</span><span className="content"><img style={{width:'80px'}} src={modalList.nationIconPath?modalList.nationIconPath:require('../../images/baseImg.png')}/></span>
            </li>
            <li>
              <span className="title">机构图标:</span><span className="content"><img style={{width:'80px'}} src={modalList.iconPath?modalList.iconPath:require('../../images/baseImg.png')}/></span>
            </li>
            <li>
              <span className="title">机构说明:</span><span className="content" dangerouslySetInnerHTML={{__html: modalList.description}} ></span>
            </li>
            <li>
              <span className="title">机构课程:</span>
              <span className="content">
                {
                  courseList.map((item,index)=> {
                    return(
                      <div key={index}>
                        <img style={{width:'80px'}} src={item.iconPath}/>
                        <p>{item.name}</p>
                        <Button  type="primary" size="small" onClick={this.addCourseModal.bind(this,2,item.id)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑课程</Button>
                        <Button  type="primary" size="small" onClick={this.deleteCourse.bind(this,item.id,modalList.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>
                      </div>
                    )
                  })
                }
              </span>
            </li>
          </ul>
        </Modal>
        {/* 新增课程 和 编辑课程 */}
        {
          this.state.addCourseFlg ?
          <ModalAddMachineryCourse 
            type={this.state.addCourseType}
            institutionId={this.state.institutionId}
            ModalFlg={this.state.addCourseFlg} 
            ModalCancel={this.addCourseCancel.bind(this)} 
            callback={this.selectList.bind(this)}
            content={this.state.courseInfo.respData ? this.state.courseInfo.respData : {}}
          /> : ""
        }
        
        
      </div>
    )
  }
}
